<template>
  <el-dialog
    :title="appSelectDialog.title"
    :visible.sync="appSelectDialog.show"
    width="1180px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-row>
      <el-col :span="11">
        <p style="font-size:20px;margin-bottom:10px;line-height:40px;">已添加模块</p>
        <el-table
          :data="dataList"
          border
          style="font-size:16px;max-height: 555px;overflow-y:auto"
          v-loading="loading"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" width="75" label="序号"></el-table-column>
          <el-table-column prop="moduleName" label="模块名称"></el-table-column>
          <el-table-column prop="status" label="类型" width="80">
            <template slot-scope="scope">
              <div style="color:#34abb5;" v-if="scope.row.type === 0">普通</div>
              <div style="color:#4d9ef8;" v-if="scope.row.type === 1">导航</div>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="80">
            <template slot-scope="scope">
              <div style="color:#f00;" v-if="scope.row.status === 0">下线</div>
              <div style="color:#34abb5;" v-if="scope.row.status === 1">上线</div>
            </template>
          </el-table-column>

          <el-table-column label="排序" fixed="right" width="100">
            <template slot-scope="scope">
              <div
                v-show="showId !== scope.row.id"
                v-text="scope.row.sort"
                @click="sortChange(scope.row)"
              ></div>
              <el-input
                :autofocus="true"
                @blur="blurChange(scope.row)"
                :ref="scope.row.id"
                type="number"
                v-show="showId == scope.row.id"
                v-model="scope.row.sort"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="2" style="text-align:center">
        <el-button
          @click="goAdd"
          style="margin-left:0;margin-top:115px;"
          type="primary"
          icon="el-icon-arrow-left"
        ></el-button>
        <el-button
          @click="goDelete"
          style="margin-left:0;margin-top:15px;"
          type="danger"
          icon="el-icon-arrow-right"
        ></el-button>
      </el-col>

      <el-col :span="11">
        <el-row>
          <span
            style="font-size:20px;margin-bottom:10px;float:left;margin-right:12px;line-height:40px;"
          >未添加模块</span>
          <div class="search-div">
            <el-input style="width:200px;" :autofocus="true" v-model="name" placeholder="请输入名称"></el-input>
          </div>
          <div class="search-div">
            <span class="search-btn backorgin" @click="search">搜索</span>
          </div>
        </el-row>
        <el-table
          :data="dataList2"
          border
          style="font-size:16px;max-height: 555px;overflow-y:auto"
          v-loading="loading2"
          @selection-change="handleSelectionChange2"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" label="序号" width="75"></el-table-column>
          <el-table-column prop="name" label="模块名称"></el-table-column>
          <el-table-column prop="status" label="状态" width="120">
            <template slot-scope="scope">
              <div style="color:#f00;" v-if="scope.row.status === 0">下线</div>
              <div style="color:#34abb5;" v-if="scope.row.status === 1">上线</div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      loading2: false,
      dataList: [],
      dataList2: [],
      showId: "",
      ids1: [],
      ids2: [],
      sort: "",
      name: ""
    };
  },
  props: ["appSelectDialog"],
  methods: {
    handleClose() {
      this.appSelectDialog.show = false;
    },
    sortChange(row) {
      this.showId = row.id;
      this.sort = row.sort;
      this.$nextTick(() => {
        this.$refs[row.id].focus();
      });
    },
    blurChange(row) {
      if (row.sort === "") {
        this.$alert("排序不能为空", "提示");
        return false;
      }
      if (row.sort === this.sort) {
        this.showId = "";
        return false;
      }
      this.$axios
        .post("/tx/app/module/update_sort", {
          id: row.id,
          sort: row.sort
        })
        .then(res => {
          if (res.code === 10200) {
            this.showId = "";
            this.sort = "";
            this.render();
          }
        });
    },
    resetData() {
      this.showId = "";
      this.dataList1 = [];
      this.dataList2 = [];
      this.ids1 = [];
      this.ids2 = [];
      this.name = "";
    },
    handleCurrentChange(val) {
      //页码切换
      this.start = val;
      this.render();
    },
    handleSelectionChange(val) {
      //左边选中
      this.ids1 = [];
      val.forEach(row => {
        this.ids1.push(row.id);
      });
    },
    handleSelectionChange2(val) {
      //右边选中
      this.ids2 = [];
      val.forEach(row => {
        this.ids2.push(row.key);
      });
    },
    goAdd() {
      if (this.ids2.length === 0) {
        this.$alert("请至少选择一个产品", "提示");
        return false;
      }
      this.$axios
        .post("/tx/app/module/add", {
          moduleKeys: this.ids2.join(","),
          appId: this.appSelectDialog.appId,
          type: this.appSelectDialog.type
        })
        .then(res => {
          if (res.code === 10200) {
            this.render();
          }
        });
    },
    goDelete() {
      if (this.ids1.length === 0) {
        this.$alert("请至少选择一个产品", "提示");
        return false;
      }
      this.$axios
        .post("/tx/app/module/delete", {
          ids: this.ids1.join(",")
        })
        .then(res => {
          if (res.code === 10200) {
            this.render();
          }
        });
    },
    render() {
      this.handleDetailRight();
      this.loading = true;
      this.$axios
        .get("/tx/app/module/list", {
          appId: this.appSelectDialog.appId,
          type: this.appSelectDialog.type
        })
        .then(res => {
          if (res.code === 10200) {
            this.dataList = res.data;
          }
          setTimeout(() => {
            this.loading = false;
          }, 200);
        });
    },
    handleDetailRight() {
      this.loading2 = true;
      this.$axios
        .get("/tx/app/module/not_belong", {
          name: this.name,
          appId: this.appSelectDialog.appId,
          type: this.appSelectDialog.type
        })
        .then(res => {
          if (res.code === 10200) {
            this.dataList2 = res.data;
          }
          setTimeout(() => {
            this.loading2 = false;
          }, 200);
        });
    },
    search() {
      //查询
      this.handleDetailRight();
    }
  },
  computed: {
    changeDialog() {
      return this.appSelectDialog.show;
    }
  },
  watch: {
    changeDialog(culval) {
      if (culval) {
        this.render();
      } else {
        this.resetData();
      }
    }
  }
};
</script>
<style>
</style>
